<template>
  <div>
      <Headline :headline1="$t('m.AccessAdmin')+'  /  '" :headline2="$t('m.FireAlarmIncident')"></Headline>
      <a-card style="width:100%">
 
  <a-tree-select
          v-model="value"
          show-search
          style="width: 200px; height: 40px;"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="argumentSelect"
          tree-default-expand-all
        >
          
          <a-tree-select-node
            v-for="item in departmentList"
            :key="item.id"
            :cont="item"
            :value="item.areaname"
            :title="item.areaname"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.areaname"
              :title="int.areaname"
            >
              <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.areaname"
                :title="ins.areaname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
        <a-input-search style="width:200px;margin-right:15px;margin-left:15px"
         :placeholder="$t('m.PleaseEnterYourSearchTerms')" enter-button @search="onSearch"
          v-model="forminitialA.key" />
         <a-checkbox @change="checkChange">
    {{$t('m.WhetherToDisplayChildNodes')}}
  </a-checkbox>
  <a-button type="primary" icon="unlock" style="margin-right:20px;">{{$t('m.EntranceGuardNormallyOpen')}}</a-button>
  <a-button type="primary" icon="lock">{{$t('m.LiftTheNormallyOpen')}}</a-button>
  <a-table
        size="small"
        style="margin-top: 20px"
        :columns="columnsA"
        :rowKey="(record, i) => i"
        :data-source="dataA"
        :pagination="false"
        bordered
      >
  </a-table>
  <!-- <a-pagination
        style="margin-top: 20px"
        show-size-changer
        :default-current="1"
        :total="totalB"
        @change="PagesB"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="onShowSizeChangeB"
        class="pages"
      /> -->
      </a-card>
  </div>
</template>

<script>
import {getAllFireArea,getFireEvents} from '@/api/entrance/cloudDoor'
import Headline from "@/components/Headline";
export default {
    name:'Firealarmfunc',
      components: {
    Headline, 
  },
  data(){
      return {
          dataA:[],
          forminitial: {
        page: 1,
        start: 0,
        limit: '',
        key: "",
      },
      departmentList:[],
      value:'',
      forminitialA:{
          page: 1,
        start: 0,
        limit: 10,
        key: "",
        areaCode:'002',
        groupId:1,
        vChild:false
      },

      columnsA:[
           {
          title: this.$t('m.EquipmentName'),
          dataIndex: "devname",
        },
        {
          title: this.$t('m.FireTime'),
          dataIndex: "eventtime",
        },
        {
          title: this.$t('m.FireCode'),
          dataIndex: "eventcode",
        },
        {
          title:this.$t('m.ReadHead'),
          dataIndex: "readhead",
        },
        {
          title:this.$t('m.deviceNumber'),
          dataIndex: "machineid",
        },
        {
          title: this.$t('m.DescriptionOfFireIncident'),
          dataIndex: "eventdes",
        },
      ]
      }
  },
  created(){
      this.getAllFireAreaList()
      this.getFireEventsList()
  },
  methods:{
      checkChange(e){
        this.forminitialA.vChild = e.target.checked
        this.getFireEventsList()
        console.log(e.target.checked)
      },
      onSearch(){
        this.getFireEventsList()
      },
      argumentSelect(value, label, extra){
        this.forminitialA.areaCode = extra.triggerNode.$attrs.cont.areacode
        this.getFireEventsList()
          console.log(extra.triggerNode.$attrs.cont)
      },
      getFireEventsList(){
          getFireEvents({params:this.forminitialA})
          .then(res => {
            this.dataA = res.data.data
              console.log(res)
          })
      },
      getAllFireAreaList(){
          getAllFireArea({params:this.forminitial})
          .then(res => {
              this.departmentList = res.data
              console.log(res)
          })
          .catch(err => {
              console.log(err)
          })
      }
  }
}
</script>

<style>

</style>